import React, { Component } from 'react';
import Item from './Itemm';
import { inject, observer } from "mobx-react";

@inject("counter")
@observer
class Cart extends Component {
    componentDidMount() {

    }
    render() {
        const { counter } = this.props;
        return (
            <section className="cart-wrapper">
                <div className="header">
                    <h2>Apple Cart Mobx</h2>
                </div>
                <div className="computed">
                    <div className="left">
                        <h3>Current: </h3>
                        <h4>{ counter.curApples }</h4>
                    </div>
                    <div className="right">
                        <h3>Eaten: </h3>
                        <h4>{ counter.eatenApples }</h4>
                    </div>
                </div>
                <div className="items-wrapper">
                    {
                        counter.items && counter.items.length > 0 ? counter.items.map(item => {
                            if (!item.isEaten) return <Item data={item} key={item.id} />
                        }) : "No Apples"
                    }
                </div>
                <div className="btn-area">
                    <button className="btn" onClick={ counter.handleGetAnApple }>Get an apple</button>
                    <button className="btn" onClick={ counter.handleGetApple }>Refresh Data</button>
                </div>
            </section>
        )
    }
}

export default Cart;